<template>
  <div class="graphics">
    <div class="list">
      <div id="echartsDemo" style="width: 500px; height: 500px"></div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "graphics",
  data() {
    return {
      msg: "myVue图形渲染",
      content: "",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let elementById = document.getElementById("echartsDemo");
      let echartsDemo = this.$echarts.init(elementById);
      let option = {
        title: {
          text: "前端技能",
        },
        tooltip: {},
        legend: {
          data: ["重要程度", "使用人数"],
        },
        xAxis: {
          data: ["HTML", "CSS", "Javascript", "Vue", "React", "Canvas"],
        },
        yAxis: {},
        series: [
          {
            name: "重要程度",
            type: "bar",
            data: [25, 30, 35, 45, 50, 40],
          },
          {
            name: "使用人数",
            type: "bar",
            data: [966, 907, 990, 900, 800, 598],
          },
        ],
      };
      echartsDemo.setOption(option);
    },
  },
};
</script>
 
<style scoped lang="scss">
.graphics {
  padding: 30px;
  .list {
    display: flex;
  }
}
</style>